<template>
  <div>
    <van-dropdown-menu>
      <!-- 第一个 -->
      <van-dropdown-item title="区域"  ref="item" >
        <van-picker
        @change="changeQy"
        :show-toolbar='false'

          value-key="label"
          :columns="cityArea"
        />
           <!-- 下面确认和取消按钮 -->
        <div class="threeBtn">
          <span class="threeDel" @click="cancel">取消</span>
          <span class="threeFinish" @click="btnFour">确定</span>
        </div>
      </van-dropdown-item>
      <!-- 第二个 -->
      <van-dropdown-item title="方式" ref="item2">
        <van-picker  @change="changeFs" value-key="label" :show-toolbar='false' :columns="rentType" />
           <!-- 下面确认和取消按钮 -->
        <div class="threeBtn">
          <span class="threeDel" @click="cancel">取消</span>
          <span class="threeFinish" @click="btnFour">确定</span>
        </div>
      </van-dropdown-item>
      <!-- 第三个 -->
      <van-dropdown-item title="价格" ref="item3">
        <van-picker @change="changeJg" value-key="label" :show-toolbar='false' :columns="price" />
         <div class="threeBtn">
          <span class="threeDel" @click="cancel">取消</span>
          <span class="threeFinish" @click="btnFour" >确定</span>
        </div>
      </van-dropdown-item>
        <!-- 第四个 -->
        <van-dropdown-item title="筛选"  @open="showPopup" ref="up">
          <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
       <van-popup
        :overlay='false'
       :lazy-render='false'
        v-model="show"
         position="right"
         :style="{ height: '82.5%',width:'60%' }" >
        <div >
          户型
          <van-row gutter="1">
      <van-col span="8" v-for="(item,index) in filterFour.roomType" :key="index">
        <span class="btn"  @click="choice(item,index,$event)" ref="a">{{item.label}}</span>
      </van-col>
</van-row>
          </div>
        <hr>
        <div>朝向
          <van-row gutter="1">
           <van-col span="8" v-for="(item,index) in filterFour.oriented" :key="index">
        <!-- <span :class="[num?'btn':'btn_color']" @click="choice" >{{item.label}}</span> -->
        <span class="btn" @click="choice(item,index,$event)" ref="a">{{item.label}}</span>
      </van-col>
      </van-row>
        </div>
        <hr>

        <div>楼层
               <van-row gutter="1">
           <van-col span="8" v-for="(item,index) in filterFour.floor" :key="index">
        <span class="btn" @click="choice(item,index,$event)" ref="a">{{item.label}}</span>
      </van-col>
      </van-row>
        </div>
        <hr>

        <div>房屋亮点
           <van-row gutter="1">
           <van-col span="8" v-for="(item,index) in filterFour.characteristic" :key="index">
        <span class="btn" @click="choice(item,index,$event)" ref="a">{{item.label}}</span>
      </van-col>
      </van-row>
        </div>
         </van-popup>
         <!-- 下面按钮 -->
        <div class="bottomBtn">
          <span class="del" @click="del">清除</span>
          <span class="Finish" @click="btnFour ">完成</span>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import { findInfo } from '@/api'
// 兄弟传值 引入bus
import bus from '@/EventBus'
export default {
  // 接收index传来的id
  // props: ['areas'],
  async created () {
    // const res = await findInfo(this.city.value) // console.log(res.data.body.area)
    const res = await findInfo(this.localId.value) // console.log(res.data.body.area)
    this.filterFour = res.data.body
    console.log(res)
    const changeFn = (obj) => {
      for (const key in obj) {
        // 遍历对象 如果没有值就给一个空值占位
        if (!obj.children) {
          obj.children = [{ label: '' }]
        }
        if (obj[key] instanceof Array) {
          for (let i = 0; i < obj[key].length; i++) {
            changeFn(obj[key][i])
          }
        }
      }
    }
    console.log(res)
    // 把area里面的数据 传过去(对象)区域
    changeFn(res.data.body.area)
    // 把地铁的数据传过去
    changeFn(res.data.body.subway)
    this.cityArea.push(res.data.body.area)
    this.cityArea.push(res.data.body.subway)
    this.rentType = res.data.body.rentType
    this.price = res.data.body.price // console.log('x', this.cityArea)
  },
  data () {
    return {
      num: true,
      // 第四个 筛选
      filterFour: {},
      rentType: [],
      price: [],
      cityArea: [],
      city: {
        name: localStorage.getItem('cityName') || '',
        value: localStorage.getItem('cityValue') || ''
      },
      // 本地的id
      localId: JSON.parse(localStorage.getItem('id')),
      show: false,
      // 接受area的id
      areaId: '',
      // 接受rentType的id
      rentTypeId: '',
      // price的id
      priceId: '',
      // 筛选的混合
      moreId: []
    }
  },
  methods: {
    // 第四快其中的每一个
    Selected (item, index) {
      console.log(item.value)
      console.log(index)
    },
    showPopup () {
      this.show = true
    },
    choice (item, index, a) {
      console.log(item.value)
      // console.log(index)
      if (a.target.className === 'btn_color') {
        a.target.classList = 'btn'
        this.moreId.forEach((item, index) => {
          this.moreId.splice(index, 1)
        })
      } else {
        a.target.classList = 'btn_color'
        this.moreId.push(item.value)
      }
      console.log(this.moreId.join(','))
    },
    // 第四个的取消选择
    del () {
      this.$refs.a.forEach(item => {
        item.classList = 'btn'
      })
      // console.log(this.$refs.a)
    },
    // 滑动 获取数据方式
    // 方式
    changeFs (picker, value, index) {
      console.log(value.value)
      this.rentTypeId = value.value
    },
    // 区域
    changeQy (picker, value, index) {
      // console.log(this.filterFour.area.label)
      const two = this.filterFour.area.children
      console.log(value)

      if (value[0] === this.filterFour.area.label) {
        // console.log('进入区域了')
        two.forEach(item => {
          if (item.label === value[1]) {
            // area的第二层id
            // console.log(item.value)
            if (value[2] === '不限') {
              this.areaId = item.value
            } else {
              item.children.forEach(items => {
                if (items.label === value[2]) {
                  this.areaId = items.value
                }
              })
            }
          }
        })
      } else {
        console.log('进入地铁了')
      }
    },
    // 价格
    changeJg (picker, value, index) {
      // 价格的id
      console.log(value.value)
      this.priceId = value.value
    },
    // 按钮 完成重新获取数据（四个公用）
    btnFour () {
      console.log(this.$refs.up)
      this.$refs.up.toggle(false)
      this.$refs.item.toggle(false)
      this.$refs.item2.toggle(false)
      this.$refs.item3.toggle(false)
      bus.$emit('value', this.areaId, this.rentTypeId, this.priceId, this.moreId.join(','))
    },
    // 筛选的完成
    screeningCompleted () {
      console.log(0)
    },
    // 前三个的取消
    cancel () {
      console.log(this.cityArea)
      this.$refs.item.toggle(false)
      this.$refs.item2.toggle(false)
      this.$refs.item3.toggle(false)
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  margin-top: -8%;
  // margin-top: -10px;
  z-index: 9999999999;
  padding: 30px;
}
/deep/.van-dropdown-menu__bar--opened {
  z-index: 0;
}
.btn {
  color:#888888;
  font-size: 13px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  display: inline-block;
  width: 70px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}
.btn_color {
    color: #21b97a;
    font-size: 13px;
    border: 1px solid #21b97a;
    background-color: #defaef;
  border-radius: 4px;
  display: inline-block;
   width: 70px;
  height: 32px;
    text-align: center;
  line-height: 32px;

}
.van-col{
  margin-top: 20px;
  margin-left: 10px;
}
// 第四个板块
.bottomBtn {
  height: 9.1%;
  width: 76%;
  // background-color: yellow;
  position:fixed;
  bottom: 0px;
  right: 0px;
  .Finish {
    color: #fff;
    background-color: #21b97a;
    display: inline-block;
    width: 70%;
    height: 100%;
        text-align: center;
    line-height:61px ;
  }
  .del {
    color: #21b97a;
    background-color: #fff;
      display: inline-block;
    width: 30%;
    height: 100%;
    text-align: center;
    line-height:61px ;
  }
}
// 前三个
.threeBtn {
  font-size: 20px;
  border-top: 1px solid #e1dfdf;
  .threeDel{
    display: inline-block;
    width: 35%;
    background-color: #fff;
    color: #21b97a;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  .threeFinish{
    display: inline-block;
    width: 65%;
    background-color: #21b97a;
    color: #fff;
    height: 50px;
        text-align: center;
    line-height: 50px;
  }
}

</style>
